<template>
  <div class="Paymentpage">
    <!-- 订单号 -->
    <div class="order_number">
      <span>订单号:{{ payParams.outTradeNo }}</span>
      <!-- 订单金额 -->
      <p class="price">¥{{ payParams.totalAmount }}</p>
    </div>
    <div class="payment_way">
      <span class="payment_way_title">请选择支付方式：</span>
      <div class="payment_way_box">
        <div class="payment_way_item">
          <Icon name="zhifubaozhifu" color="#0abaef"></Icon>
          <label for="alipay">支付宝</label>
          <input
            type="radio"
            id="alipay"
            name="payment_way"
            value="alipay"
            v-model="paymentMethod"
          />
        </div>
        <div class="payment_way_item">
          <Icon name="zhifu-weixinzhifu" color="#40ba49"></Icon>
          <label for="wechat">微信支付</label>
          <input
            type="radio"
            id="wechat"
            name="payment_way"
            value="wechat"
            v-model="paymentMethod"
          />
        </div>
      </div>
    </div>
    <!-- 确定支付 -->
    <div class="payment_btn" @click="handlePayment">
      <span>确定支付</span>
    </div>
    <div id="alipay-form-container"></div>
  </div>
</template>

<script>
import { orderPayAPI } from '@/api/cart';
import Icon from '@/components/common/Icon/index.vue';
import Message from '@/utils/message';
export default {
  components: {
    Icon,
  },
  data() {
    return {
      orderList: [],
      totalPrice: 0,
      payParams: {}, //这是支付的参数
      paymentMethod: '', // 新增：保存用户选择的支付方式
    };
  },
  created() {
    // 订单号
    this.payParams.outTradeNo = localStorage.getItem('outTradeNo');
    // 金额
    this.payParams.totalAmount = localStorage.getItem('totalPrice');
    // 支付方式
    this.payParams.type = 1;
  },
  methods: {
    // 提交订单

    async handlePayment() {
      // 1. 判断是否选择了支付方式
      if (!this.paymentMethod) {
        Message.error('请先选择支付方式！');
        return;
      }
      let res = await orderPayAPI(this.payParams);
      const { code, list } = res;
      if (code === 200) {
        const container = document.getElementById('alipay-form-container');
        container.innerHTML = list;
        // ✅ 手动查找并提交表单（关键！）
        const form = container.querySelector('form');
        if (form) {
          form.submit(); // 主动触发提交
        } else {
          alert('支付表单加载失败，请重试');
        }
      } else {
        console.log('支付失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Paymentpage {
  padding: 20px;
  height: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .order_number {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    gap: 20px;

    span {
      font-size: 16px;
      color: #ccc;
    }

    .price {
      font-size: 20px;
      color: #333;
    }
  }

  .payment_way {
    padding: 10px;
    border-radius: 5px;

    .payment_way_title {
      font-size: 14px;
      color: #333;
      white-space: nowrap;
    }

    .payment_way_box {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .payment_way_item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: #333;

      input {
        width: 15px;
        height: 15px;
        margin-left: auto;
        border: 1px solid #ccc;
      }
    }

    span {
      font-size: 16px;
      color: #333;
    }
  }

  .payment_btn {
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #0abaef;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    margin-top: auto;
    color: #fff;
  }
}
</style>
